import { MyPagination } from "@/components/MyPagination";
import { formattedDate } from "@/lib/dateFormat";
import { Card, CardBody, CardFooter, CardHeader } from "@heroui/card";
import { Code } from "@heroui/code";
import { Divider } from "@heroui/divider";
import { Image } from "@heroui/image";
import { Link } from "@heroui/link";
import { Pagination } from "@heroui/pagination";
import { Key } from "react";
import { CiSearch, CiBoxList } from "react-icons/ci";
import { SiFireship } from "react-icons/si";

interface IProps {
    data: any
    hotList: any[]
}

export default function MyCard(props: IProps) {
    const data = props.data
    const totalPages = Math.ceil((data?.total | 0) / 20)
    const list = data?.list || []

    const randomNumber = () => {
        return Math.floor(Math.random() * (10000 - 1000 + 1)) + 1000;
    }

    return (
        <>
            {/* 热门搜索 */}
            <Card className="" radius="none">
                <CardHeader className="flex gap-3 ">
                    <div className="w-full flex flex-row justify-between items-center text-[#006fee]">
                        <div className="flex flex-row items-center">
                            <CiSearch size={22} />
                            <div className="flex flex-col">
                                <p className="text-md"> 热门搜索</p>
                            </div>
                        </div>
                        <div className="text-[#f42b34]">
                            总数：{data?.total}部  今日：100++部
                        </div>
                    </div>
                </CardHeader>
                <Divider />
                <CardBody>
                    <div className="flex flex-col gap-3">
                        {
                            props.hotList.map((item: any) => {
                                return (
                                    <div key={item.id + 'hout'}>
                                        <span className="text-white text-[12px] bg-red-500 p-[2px] rounded-[2px]">热</span>
                                        <span className="text-sm text-gray-500 pl-2">{randomNumber()} °C</span>
                                        <span className="ml-2 bg-[#edf0ff] text-sm p-1">{item.webdramaType}</span>
                                        <Link key={item.id} href={`/details/${item.id}`} className="inline-block" color="foreground" underline="hover">
                                            <span className="pl-2">{item.title}</span>
                                        </Link>
                                    </div>
                                )
                            })
                        }

                    </div>
                </CardBody>
                <Divider />
                <CardFooter>
                    <Link isExternal showAnchorIcon target="_blank" href="/search">
                        查看更多资源
                    </Link>
                </CardFooter>
            </Card >
            {/* 短剧总列表 */}
            < Card className="mt-4" radius="none" >
                <CardHeader className="flex gap-3 ">
                    <div className="w-full flex flex-row justify-between items-center">
                        <div className="flex flex-row items-center text-[#006fee]">
                            <CiBoxList size={22} />
                            <div className="flex flex-col">
                                <p className="text-md"> 所有短剧列表</p>
                                {/* <p className="text-small text-default-500">heroui.com</p> */}
                            </div>
                        </div>
                    </div>
                </CardHeader>
                <Divider />
                <CardBody>
                    <div className="flex flex-col gap-3">
                        {
                            list.map((item: any) => {
                                return (
                                    <div key={item.id + 'djre'} className="flex flex-row justify-between items-center">
                                        <div>
                                            <span className="text-sm text-gray-500">{formattedDate(item.updatedAt)}</span>
                                            <span className="ml-2 bg-[#edf0ff] text-sm p-1">{item.webdramaType}</span>
                                            <Link href={`/details/${item.id}`} className="pl-2" color="foreground" underline="hover">
                                                {item.title}
                                            </Link>
                                        </div>
                                        <div className="sm:block hidden pr-6">
                                            <Image
                                                alt="夸克网盘"
                                                src="/images/quark_icon.ico"
                                                width={22}
                                            />
                                        </div>
                                    </div>
                                )
                            })
                        }
                    </div>
                    <div className="flex justify-center pt-6 pb-4">
                        <MyPagination totalPages={totalPages} />
                    </div>
                </CardBody>
            </Card >

        </>
    );
}
